<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        #lamp {

            height: 140px;

            width: 530px;

            border: 1px solid #369;

        }



        #red,

        #green,

        #yellow {

            width: 120px;

            height: 120px;

            border-radius: 50%;

            background-color: gray;

            float: left;

            margin-left: 10px;

            margin-top: 10px;

        }



        #count {

            width: 120px;

            float: left;

            height: 120px;

            margin-left: 10px;

            margin-top: 10px;

            text-align: center;

            line-height: 120px;

            font-size: 60px;

        }

    </style>

</head>



<body>

    <div id="lamp">

        <div id="red"></div>

        <div id="yellow"></div>

        <div id="green"></div>

        <div id="count"></div>

    </div>

</body>



</html>

<script>

    var lamp = {

        red: {

            obj: document.getElementById('red'),

            timeout: 30,

            style: ['red', 'gray', 'gray'],

            next: 'green'

        },

        yellow: {

            obj: document.getElementById('yellow'),

            timeout: 5,

            style: ['gray', 'yellow', 'gray'],

            next: 'red'

        },

        green: {

            obj: document.getElementById('green'),

            timeout: 10,

            style: ['gray', 'gray', 'green'],

            next: 'yellow'

        },

        changeStyle(style) {

            this.red.obj.style.backgroundColor = style[0]

            this.yellow.obj.style.backgroundColor = style[1];

            this.green.obj.style.backgroundColor = style[2]

        }

    }

    var count = {

        obj: document.getElementById('count'),

        change: function (num) {

            this.obj.innerHTML = (num < 10) ? ('0' + num) : num;

        }

    }

    var now = lamp.green;

    var timeout = now.timeout;

    //console.log(now.style)

    lamp.changeStyle(now.style);

    count.change(timeout);

    // setInterval(function () {

    //     if (--timeout <= 0) {

    //         now = lamp[now.next];

    //         timeout=now.timeout;

    //         lamp.changeStyle(now.style);

    //     }

    //     count.change(timeout)

    // }, 1000)

    function me(){

        if (--timeout <= 0) {

                now = lamp[now.next];

                timeout = now.timeout;

                lamp.changeStyle(now.style);

            }

        count.change(timeout)

        //setTimeout中的函数名称要加上引号

        setTimeout('me()', 1000);

    }

    me();



</script>

